<!--
 * @Description: 我的tab
 * @Author: charles
 * @Date: 2021-12-14 20:42:55
<<<<<<< HEAD
 * @LastEditors: HeAo
 * @LastEditTime: 2022-01-05 19:23:16
=======
 * @LastEditors: boBrother
 * @LastEditTime: 2022-01-05 21:48:29
>>>>>>> 62cdc478984197248f77238bd2cad23fe96a67bc
-->
<template>
  <div class="user">
    <div class="header">
      <div class="photo">
        <van-uploader
          multiple
          :max-count="1"
          result-type="file"
          :after-read="afterRead"
        >
          <!-- 默认头像 -->
          <img :src="info.user_face" alt="" />
        </van-uploader>
      </div>
      <div class="name"></div>
    </div>
    <van-cell-group inset>
<<<<<<< HEAD
  <van-cell title="账号">{{UserInformation.username}} </van-cell>
  <van-cell title="姓名">{{UserInformation.realname}}</van-cell>
  <van-cell title="生日">{{UserInformation.birth | datefmt}}</van-cell>
  <van-cell title="性别"><span v-if="UserInformation.gender == 'male'">男</span>
  <span v-else>女</span></van-cell>
  <van-cell title="账号状态">{{UserInformation.status}}</van-cell>
  <van-cell title="所有订单" is-link to="/manager/order" />
</van-cell-group>
  <van-button @click="EditUserInformation" round type="info" size="small" icon="edit" >编辑信息</van-button>
  <van-button @click="logoutHandler" round type="info" size="small" icon="revoke" color="red">退出登录</van-button>
  <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
    <van-cell-group>
  <van-field v-model="form.username" required placeholder="请输入用户名"  />
  <van-field v-model="form.password" required placeholder="请输入密码" type="password"  />
  <van-field v-model="form.realname" required placeholder="请输入姓名"  />
  <van-field v-model="form.telephone" required placeholder="请输入电话"  />
  <van-button class="EditBtn" @click="ConfirmEditUserInformation" round type="info" size="small">确认修改</van-button>
<!-- {{UserInformation}} -->
</van-cell-group>
  </van-popup>
=======
      <van-cell title="账号">{{ UserInformation.username }} </van-cell>
      <van-cell title="姓名">{{ UserInformation.realname }}</van-cell>
      <van-cell title="生日">{{ UserInformation.birth | datefmt }}</van-cell>
      <van-cell title="性别"
        ><span v-if="UserInformation.gender == 'male'">男</span>
        <span v-else>女</span></van-cell
      >
      <van-cell title="账号状态">{{ UserInformation.status }}</van-cell>
      <van-cell title="所有订单" is-link to="/manager/order" />
    </van-cell-group>
    <van-button
      @click="EditUserInformation"
      round
      type="info"
      size="small"
      icon="edit"
      >编辑信息</van-button
    >
    <van-button
      @click="logoutHandler"
      round
      type="info"
      size="small"
      icon="revoke"
      color="red"
      >退出登录</van-button
    >
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <van-cell-group>
        <van-field
          v-model="form.username"
          required
          placeholder="请输入用户名"
        />
        <van-field
          v-model="form.password"
          required
          placeholder="请输入密码"
          type="password"
        />
        <van-field v-model="form.realname" required placeholder="请输入姓名" />
        <van-field v-model="form.telephone" required placeholder="请输入电话" />
        <van-button
          class="EditBtn"
          @click="ConfirmEditUserInformation"
          round
          type="info"
          size="small"
          >确认修改</van-button
        >
        <!-- {{UserInformation}} -->
      </van-cell-group>
    </van-popup>
>>>>>>> 62cdc478984197248f77238bd2cad23fe96a67bc
  </div>
</template>
<script>
import { get, postJSON } from "@/utils/request.js";
import { mapState, mapActions } from "vuex";
import { Toast, Dialog, Notify } from "vant";
import axios from "axios";
import { patch } from "../../utils/request";
export default {
  data() {
    return {
      UserInformation: [],
      show: false,
      form: [],
    };
  },
  methods: {
    //获取用户信息
    GetUserInformation() {
      get("/user/getInfo").then((res) => {
        this.UserInformation = res.data;
      });
    },
    //编辑用户信息
    EditUserInformation() {
      this.show = true;
      this.form = [];
    },
    //确认修改按钮点击事件
    ConfirmEditUserInformation() {
      Dialog.confirm({
        title: "确认信息",
        message: "确认修改？",
      })
        .then(() => {
          postJSON("/user/saveOrUpdate", {
            id: this.UserInformation.id,
            username: this.form.username,
            password: this.form.password,
            realname: this.form.realname,
            telephone: this.form.telephone,
          }).then((res) => {
            this.GetUserInformation();
            Notify({ type: "success", message: "修改成功" });
            this.show = false;
          });
        })
        .catch(() => {});
    },
    ...mapActions("user", ["logout", "getInfo"]),
    logoutHandler() {
      this.logout();
    },
    // 上传图片
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      // 将文件上传至服务器测试
      let url = "http://121.199.29.84:8001/file/upload";
      let params = new FormData();
      params.append("file", file.file);
      axios
        .post(url, params, {
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((response) => {
          // 更新用户头像
          file.status = "success";
          // 新头像地址
          let user_face =
            "http://121.199.29.84:8888/group1/" + response.data.data.id;
          let params = {
            id: this.info.id + "",
            user_face,
          };
          let url = "/user/updateUserFace";
          patch(url, params).then((resp) => {
            Toast.success(resp.message);
            // 刷新用户信息 - 状态机
            this.getInfo();
          });
        })
        .catch((error) => {
          file.status = "failed";
          file.message = "上传失败";
          Toast("图片上传失败:" + error + " 请返回重新上传");
        });
    },
  },
  created() {
    this.GetUserInformation();
  },
  computed: {
    ...mapState("user", ["info"]),
  },
};
</script>

<style scoped>
.header {
  padding-top: 46px;
  text-align: center;
  background: #1659a0;
  margin-bottom: 2em;
}

.header .photo {
  margin: 0 auto;
  width: 10em;
  height: 10em;
  border-radius: 5px;
  box-sizing: border-box;
  border: 1px solid #1659a0;
  overflow: hidden;
  padding: 1em;
}
.header .name {
  line-height: 3em;
  font-size: 16px;
  color: #ffffff;
}
.header .photo img {
  width: 100%;
}

.van-button {
  width: 85%;
  margin-left: 30px;
  margin-top: 10px;
  text-align: center;
}

.EditBtn {
  width: 70%;
  margin-left: 55px;
  margin-top: 20px;
  text-align: center;
}
</style>